import {C} from '../utils'

let _this = null;
let textarea = null;
let offset = {x: 0, y: 0}

function textareaFn(id, x, y){
  let textarea = document.createElement('SPAN')
  textarea.id = id
  textarea.setAttribute('onmousedown', 'vd_input_down(event)')
  textarea.setAttribute('onmouseup', 'vd_input_up(event)')
  textarea.setAttribute('ontouchstart', 'vd_input_down(event)')
  textarea.setAttribute('ontouchend', 'vd_input_up(event)')
  textarea.setAttribute('onblur', 'vd_input_blur(event)')
  textarea.setAttribute('x', x)
  textarea.setAttribute('y', y)
  textarea.setAttribute('contenteditable', 'true')
  textarea.classList.add('vd-textarea')
  textarea.style.display = "inline-block"
  textarea.style.display = "inline-block"
  textarea.style.whiteSpace = "nowrap"
  textarea.style.position = "absolute"
  textarea.style.background = "transparent"
  textarea.style.resize = "none"
  textarea.style.border = "2px solid red"
  textarea.style.fontWeight = "bold"
  textarea.style.overflow = "hidden"
  textarea.style.outline = "auto 2px #000"
  textarea.style.caretColor = "#a45fff"
  textarea.style.letterSpacing = "1px"
  textarea.style.fontFamily = "cursive"
  textarea.style.lineHeight = "1"
  textarea.style.padding = "0 3px"
  textarea.style.textAlign = "left"
  textarea.style.fontSize = (_this.defDrawOptions.fontSize / _this.scale) + 'px'
  textarea.style.color = _this.defDrawOptions.color
  textarea.style.minWidth ='200px'
  textarea.style.minHeight ='25px'
  textarea.style.left = x + 'px'
  textarea.style.top = y + 'px'
  _this.canvasBox.append(textarea)

  textarea.onkeydown = function (e){
    if (e.keyCode === 13) {
      document.execCommand('insertHTML', false, '<br><br>');
      return false;
    }
  }
  textarea.addEventListener("paste", function () {
    if ((event.clipboardData || event.originalEvent)) {
      let clipboardData = (event.clipboardData || window.clipboardData);
      let val = clipboardData.getData('text');
      val = val.replace(new RegExp('\n', 'g'), '<br>')
      clipboardData.setData('text/plain', val);
      document.execCommand('insertHTML', false, val);
      event.preventDefault();
    }
  })
  return textarea
}

function save(value, id, x, y){
  let item = null;
  for (let i = 0; i < _this.data.length;i++){
    if(_this.data[i].id === id){
      item = _this.data[i]
    }
  }
  if(item){
    item.value = value;
    item.x = x * _this.scale;
    item.y = y * _this.scale;
  }else{
    _this.save({type: 'Text', x: x * _this.scale, y: y * _this.scale, value, id, ys: _this.defDrawOptions.color, font: _this.defDrawOptions.fontSize, left: x * _this.scale, top: y * _this.scale})
  }
}

export default {
  click(){
    _this = this;
    this.disabledCtrl('Rotate', true)
    this.is_textarea_move = false;
    window.vd_input_up =  (e) => {
      e.stopPropagation()
      this.is_textarea_move = false
      e.target.style.opacity = '1'
      e.target.style.cursor = 'auto';
      return false
    }
    window.vd_input_down = (e) => {
      textarea = e.target;
      if(e.changedTouches && e.changedTouches.length > 0){
        e = e.changedTouches[0]
        offset = {
          x: e.clientX  - textarea.offsetLeft,
          y: e.clientY - textarea.offsetTop,
        }
      }else{
        offset = {
          x: e.offsetX || 0,
          y: e.offsetY || 0,
        }
      }
      this.is_textarea_move = true
    }
    window.vd_input_blur = (e) => {
      let value = e.target.innerText;
      if(value && e.target.innerHTML != '<br>'){
        save(value, e.target.getAttribute('id'), e.target.getAttribute('x') * 1, e.target.getAttribute('y') * 1)
      }else{
        let id = e.target.getAttribute('id')
        _this.data = _this.data.filter(item => {
          if(item.type === 'Text' && item.id === id){
            return false
          }
          return true
        })
        e.target.parentNode.removeChild(e.target)
      }
    }
  },
  canvasMousedown(e){
    this.id = 'vd-text-' + Date.now()
    let {x, y} = C.eventWrapper(e)
    textarea = textareaFn(this.id, x, y)
    setTimeout(() => {
      textarea.focus()
    })
  },
  canvasMouseup(){},
  canvasMouseout(){},
  canvasTouchstart(e){
    this.id = 'vd-text-' + Date.now()
    if(e.changedTouches && e.changedTouches.length > 0){
      e = e.changedTouches[0]
    }
    let {x, y} = C.eventWrapper(e)
    textarea = textareaFn(this.id, x, y)
    setTimeout(() => {
      textarea.focus()
    })
  },
  canvasTouchend(){},
  winMouseup(){
    this.is_textarea_move = false
  },
  winMousemove({clientX, clientY }){
    if(this.is_textarea_move && textarea){
      let scrollTop = this.vdView.scrollTop
      let scrollLeft = this.vdView.scrollLeft
      textarea.style.cursor = 'move';
      let x = clientX - this.canvasBox.offsetLeft - 18 - offset.x + scrollLeft;
      let y = clientY - this.canvasBox.offsetTop - 18 - offset.y + scrollTop
      textarea.style.left = x + 'px'
      textarea.style.top = y + 'px'
      textarea.style.opacity = '0.5'
      textarea.setAttribute('x', x)
      textarea.setAttribute('y', y)
    }
  },
  winTouchMove(e){
    if(this.is_textarea_move && textarea){
      textarea.style.cursor = 'move';
      if(e.changedTouches && e.changedTouches.length > 0){
        e = e.changedTouches[0]
      }
      let scrollTop = this.vdView.scrollTop
        let scrollLeft = this.vdView.scrollLeft
      let {clientX, clientY } = e;
      let x = clientX - this.canvasBox.offsetLeft - 18 + scrollLeft;;
      let y = clientY - this.canvasBox.offsetTop - 18 + scrollTop
      textarea.style.left = x + 'px'
      textarea.style.top = y + 'px'
      textarea.style.opacity = '0.5'
      textarea.setAttribute('x', x)
      textarea.setAttribute('y', y)
    }
  },
  winTouchend(){
    this.is_textarea_move = false
  },
  visibilitychange(){},
  fontChange(size){},
  colorChange(color){},
}
